<template>
    <div class='goodsInfo'>
        <div class="boxin">
            <div class="boxl">
                <div class="txt txt1">
                    <p class="title">基本信息</p>
                </div>
                <div class="txt txt2">
                    <p class="title">库存规格</p>
                </div>
                <div class="txt txt3">
                    <p class="title">其它信息</p>
                </div>
                <div class="txt txt4">
                    <p class="title">特殊信息</p>
                </div>
            </div>
            <div class="boxr">
                <el-form ref="form" :model="form" :rules="rules" label-width="200px" v-loading="loading">
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="商品名称" prop="name">
                                <el-input v-if="edit" v-model="form.name" placeholder="请输入商品名称" />
                                <span v-else>{{ form.name }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="副标题" prop="subtitle">
                                <el-input v-if="edit" v-model="form.subtitle" placeholder="请输入副标题" />
                                <span v-else>{{ form.subtitle }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="商品品牌" prop="brand">
                                <el-select v-if="edit" v-model="form.brand" placeholder="请选择商品品牌" filterable clearable>
                                    <el-option v-for="dict in brandList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                                </el-select>
                                <span v-else>
                                    {{ selectDictLabel(brandList, form.brand) }}
                                </span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="16">
                            <el-form-item label="商品介绍" prop="introduce">
                                <el-input v-model="form.introduce" type="textarea" rows="6" placeholder="请输入商品介绍"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="运费模板" prop="mould">
                                <el-select v-if="edit" v-model="form.mould" placeholder="请选择运费模板" filterable clearable>
                                    <el-option v-for="dict in mouldList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                                </el-select>
                                <span v-else>
                                    {{ selectDictLabel(mouldList, form.mould) }}
                                </span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="商品货号" prop="article_no">
                                <template v-if="edit">
                                    <el-input v-model="form.article_no" placeholder="请输入商品货号" />
                                    <span class="text-muted">如果您不输入商品货号，系统将自动生成一个唯一的货号。</span>
                                </template>
                                <span v-else>{{ form.article_no }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="商品售价" prop="selling_price">
                                <el-input v-model="form.selling_price" @keyup.native="form.selling_price=onInput(form.selling_price)" placeholder="请输入商品售价" />
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="市场价" prop="market_price">
                                <el-input v-model="form.market_price" @keyup.native="form.market_price=onInput(form.market_price)" placeholder="请输入商品售价" />
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="商品库存" prop="stock">
                                <template v-if="edit">
                                    <el-input v-model="form.stock" @keyup.native="form.stock=handleNum(form.stock)" placeholder="请输入商品库存" />
                                    <span class="text-muted">该设置只对单品有效，当商品存在多规格货品时为不可编辑状态，库存数值取决于货品数量</span>
                                </template>
                                <span v-else>{{ form.stock }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="库存预警值" prop="warning_value">
                                <el-input v-if="edit" v-model="form.warning_value" @keyup.native="form.warning_value=handleNum(form.warning_value)"
                                    placeholder="请输入库存预警值" />
                                <span v-else>{{ form.warning_value }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="计量单位" prop="measurement">
                                <el-input v-if="edit" v-model="form.measurement" placeholder="请输入计量单位" />
                                <span v-else>{{ form.measurement }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-col :span="18">
                                <el-form-item label="商品重量" prop="weight">
                                    <el-input v-if="edit" v-model="form.weight" placeholder="请输入" />
                                    <span v-else>{{ form.weight }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="" prop="weight_value" label-width="20px">
                                    <el-select v-if="edit" v-model="form.weight_value" placeholder="请选择" filterable clearable>
                                        <el-option v-for="dict in weightValue" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="赠送优币" prop="coins">
                                <template v-if="edit">
                                    <el-input v-model="form.coins" @keyup.native="form.coins=handleNum(form.coins)" placeholder="请输入赠送优币" />
                                    <span class="text-muted">购买该商品时赠送消费积分数</span>
                                </template>
                                <span v-else>{{ form.coins }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="赠送等级成长值" prop="growth">
                                <template v-if="edit">
                                    <el-input v-model="form.growth" @keyup.native="form.growth=handleNum(form.growth)" placeholder="请输入赠送等级成长值" />
                                    <span class="text-muted">购买该商品时赠送等级积分数</span>
                                </template>
                                <span v-else>{{ form.growth }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="优币购买金额" prop="purchase_price">
                                <el-input v-model="form.purchase_price" @keyup.native="form.purchase_price=onInput(form.purchase_price)" placeholder="请输入优币购买金额" />
                                <span class="text-muted">(此处需填写金额)购买该商品时最多可以使用积分的金额</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="预告商品" prop="pre_sale">
                                <el-switch v-model="form.pre_sale"></el-switch>
                                <span class="text-muted">如果设置为预告商品，商品上架和商品推荐不可用。</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="商品上架" prop="put">
                                <el-switch v-model="form.put"></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="商品推荐" prop="recommend">
                            <el-radio-group v-model="form.recommend">
                                <el-radio v-for="dict in recommendList" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                            <!-- <el-checkbox-group v-model="form.recommend">
                                    <el-checkbox v-for="dict in recommendList" @change="$forceUpdate()" :label="String(dict.dictValue)" :key="dict.dictValue"
                                        :disabled="!edit">
                                        {{dict.dictLabel}}
                                    </el-checkbox>
                                </el-checkbox-group> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="服务保证" prop="service">
                            <el-radio-group v-model="form.service">
                                <el-radio v-for="dict in serviceList" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                            <!-- <el-checkbox-group v-model="form.recommend">
                                    <el-checkbox v-for="dict in recommendList" @change="$forceUpdate()" :label="String(dict.dictValue)" :key="dict.dictValue"
                                        :disabled="!edit">
                                        {{dict.dictLabel}}
                                    </el-checkbox>
                                </el-checkbox-group> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="详细页标题" prop="detail_title">
                                <el-input v-if="edit" v-model="form.detail_title" placeholder="请输入详细页标题" />
                                <span v-else>{{ form.detail_title }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="详细页描述" prop="detail_desc">
                                <el-input v-if="edit" v-model="form.detail_desc" placeholder="请输入详细页描述" />
                                <span v-else>{{ form.detail_desc }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="商品关键词" prop="keywords">
                                <template v-if="edit">
                                    <el-input v-model="form.keywords" placeholder="请输入商品关键词" />
                                    <span class="text-muted">商品关键词请用空格分隔；有两个功能，一是可以作为站内关键词查询，在前台搜索框</span>
                                    <span class="text-muted">输入关键词后，能够搜索到该商品；二是作为搜索引擎收录使用.</span>
                                </template>
                                <span v-else>{{ form.keywords }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="16">
                            <el-form-item label="商品备注" prop="remarks">
                                <el-input v-model="form.remarks" type="textarea" rows="6" placeholder="请输入商品备注"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item></el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="特惠促销" prop="is_special">
                                <el-radio-group v-model="form.is_special" v-if="edit">
                                    <el-radio v-for="dict in yesNo" :key="dict.dictValue" :label="Number(dict.dictValue)">
                                        {{ dict.dictLabel }}
                                    </el-radio>
                                </el-radio-group>
                                <span v-else>{{ selectDictLabel(yesNo, form.is_pension) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <!-- <el-col :span="8">
                            <el-form-item prop="startMonth" >
                                <el-date-picker v-model="form.startMonth" type="month" value-format="yyyy-MM" placeholder="请选择开始月份" @change="changeMonth"
                                    :picker-options="startDatePicker" v-if="!isChange" />
                                <span v-else>{{form.startMonth}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="payToMonth" label-width="20px">
                                <el-date-picker v-model="form.payToMonth" type="month" value-format="yyyy-MM" placeholder="请选择缴费至月份" @change="changeMonth"
                                    :picker-options="endDatePicker" />
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="12">
                            <el-form-item prop="specialDate">
                                <el-date-picker v-model="form.specialDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" value-format="yyyy-MM-dd" placeholder="请选择创建日期" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="selling_price" label-width="80px">
                                <el-input v-model="form.selling_price" @keyup.native="form.selling_price=onInput(form.selling_price)" placeholder="请输入输入促销价格" />
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="商品限购" prop="is_purchase">
                                <el-radio-group v-model="form.is_purchase" v-if="edit">
                                    <el-radio v-for="dict in yesNo" :key="dict.dictValue" :label="Number(dict.dictValue)">
                                        {{ dict.dictLabel }}
                                    </el-radio>
                                </el-radio-group>
                                <span v-else>{{ selectDictLabel(yesNo, form.is_purchase) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item prop="specialDate">
                                <el-date-picker v-model="form.specialDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" value-format="yyyy-MM-dd" placeholder="请选择创建日期" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="selling_price" label-width="80px">
                                <el-input v-model="form.selling_price" @keyup.native="form.selling_price=onInput(form.selling_price)" placeholder="请输入输入促销价格" />
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="会员价格" prop="is_member">
                                <el-radio-group v-model="form.is_member" v-if="edit">
                                    <el-radio v-for="dict in yesNo" :key="dict.dictValue" :label="Number(dict.dictValue)">
                                        {{ dict.dictLabel }}
                                    </el-radio>
                                </el-radio-group>
                                <span v-else>{{ selectDictLabel(yesNo, form.is_member) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-table class="tablist" border :data="form.memberList">
                            <el-table-column label="黄金会员" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.money" @input.native="scope.row.money=onInput(scope.row.money)" @input=";listError=''">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="白金会员" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.money" @input.native="scope.row.money=onInput(scope.row.money)" @input=";listError=''">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="钻石会员" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.money" @input.native="scope.row.money=onInput(scope.row.money)" @input=";listError=''">
                                    </el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>

                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="阶梯价格" prop="is_ladder">
                                <el-radio-group v-model="form.is_ladder" v-if="edit">
                                    <el-radio v-for="dict in yesNo" :key="dict.dictValue" :label="Number(dict.dictValue)">
                                        {{ dict.dictLabel }}
                                    </el-radio>
                                </el-radio-group>
                                <span v-else>{{ selectDictLabel(yesNo, form.is_ladder) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-table class="tablist" border :data="form.ladderList">
                            <el-table-column label="数量" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.money" @input.native="scope.row.money=onInput(scope.row.money)" @input=";listError=''">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="价格" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.money" @input.native="scope.row.money=onInput(scope.row.money)" @input=";listError=''">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-plus" v-if="scope.$index==0" @click="form.ladderList.push({})">
                                        增加
                                    </el-button>
                                    <el-button size="mini" type="text" icon="el-icon-delete" v-else @click="form.ladderList.splice(scope.$index,1);">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="24">
                        <el-col :span="12">
                            <el-form-item label="满减价格" prop="is_ladder">
                                <el-radio-group v-model="form.is_ladder" v-if="edit">
                                    <el-radio v-for="dict in yesNo" :key="dict.dictValue" :label="Number(dict.dictValue)">
                                        {{ dict.dictLabel }}
                                    </el-radio>
                                </el-radio-group>
                                <span v-else>{{ selectDictLabel(yesNo, form.is_ladder) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <el-table class="tablist" border :data="form.ladderList">
                            <el-table-column label="数量" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.money" @input.native="scope.row.money=onInput(scope.row.money)" @input=";listError=''">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="价格" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.money" @input.native="scope.row.money=onInput(scope.row.money)" @input=";listError=''">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-plus" v-if="scope.$index==0" @click="form.ladderList.push({})">
                                        增加
                                    </el-button>
                                    <el-button size="mini" type="text" icon="el-icon-delete" v-else @click="form.ladderList.splice(scope.$index,1);">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-form>
                <div class="button">
                    <el-button @click="$emit('prev')">上一步，选择商品分类</el-button>
                    <el-button type="primary" @click="submit">下一步，填写商品信息</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { yesNo } from "@/api/dictionary"
export default {
    name: 'goodsInfo',
    components: {

    },
    data() {
        return {
            loading: false,
            edit: true,
            form: {
                weight_value: 1,
                pre_sale: true,
                put: false,
                recommend: [],
                specialDate: [],
                memberList: [{}],
                ladderList: [{}],
            },
            rules: {
                name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                subtitle: [{ required: true, message: '请输入副标题', trigger: 'blur' }],
                brand: [{ required: true, message: '请选择商品品牌', trigger: 'change' }],
                introduce: [{ required: true, message: '请输入商品介绍', trigger: 'blur' }],
                mould: [{ required: true, message: '请选择运费模板', trigger: 'change' }],
                // article_no: [{ required: true, message: '请输入商品货号', trigger: 'blur' }],
                selling_price: [{ required: true, message: '请输入商品售价', trigger: 'blur' }],
                stock: [{ required: true, message: '请输入商品库存', trigger: 'blur' }],
            },
            brandList: [
                { dictValue: 1, dictLabel: "品牌1" },
                { dictValue: 2, dictLabel: "品牌2" },
            ],
            mouldList: [
                { dictValue: 1, dictLabel: "模板1" },
                { dictValue: 2, dictLabel: "模板2" },
            ],
            weightValue: [
                { dictValue: 1, dictLabel: "g" },
                { dictValue: 2, dictLabel: "kg" },
            ],
            recommendList: [
                { dictValue: 1, dictLabel: "新品" },
                { dictValue: 2, dictLabel: "推荐" },
            ],
            serviceList: [
                { dictValue: 1, dictLabel: "无忧退货" },
                { dictValue: 2, dictLabel: "快速退款" },
                { dictValue: 3, dictLabel: "免费包邮" },
            ],
            yesNo: yesNo,
        }
    },
    created() {
        this.edit = this.type == "detail" ? false : true
    },
    methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$emit('next')
                }
            })
        }
    },
}
</script>
<style scoped lang='scss'>
</style>